<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多彩贵州 - 熊猫综合旅游网</title>
  <style>
    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding-top: 60px;
      background-color: #f4f4f4;
    }
    

    /* 导航栏样式 */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #333;
      color: white;
      padding: 10px 20px;
      overflow-x: auto;
      white-space: nowrap;
      z-index: 1000;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin-right: 20px;
      display: inline-block;
      padding: 5px 10px;
    }

    /* 视频区域样式 */
    .video-container {
      width: 800px;
      height: 450px;
      margin: 50px auto;
      overflow: hidden;
      position: relative;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 居中文字介绍样式 */
    .content {
      text-align: center;
      margin-top: 40px;
    }

    .content h1 {
      font-size: 2em;
      color: #333;
    }

    .content p {
      font-size: 1.1em;
      color: #666;
    }

    /* 景点轮播图样式 */
    .carousel-container {
      max-width: 600px;
      margin: 100px auto 0;
      height: 400px;
      overflow: hidden;
      position: relative;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .carousel-track {
      display: flex;
      flex-direction: column;
      transition: transform 0.5s ease-in-out;
      height: 100%;
    }

    .carousel-item {
      min-height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
    }

    .carousel-item img {
      width: 100%;
      height: auto;
      max-height: 380px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* 小吃区域样式 */
    .snack-section {
      max-width: 1000px;
      margin: auto;
      padding: 20px;
    }

    /* 小吃图片轮播样式 */
    .snack-carousel-container {
      max-width: 400px; /* 减小图片轮播容器宽度 */
      margin: auto;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .snack-carousel-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .snack-carousel-item {
      min-width: 100%;
      transition: all 0.2s ease;
    }

    .snack-carousel-item img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* 小吃轮播控制按钮样式 */
    .snack-carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      font-size: 18px;
      border-radius: 50%;
    }

    .snack-carousel-btn.prev {
      left: 10px;
    }

    .snack-carousel-btn.next {
      right: 10px;
    }

    /* 小吃轮播指示器样式 */
    .snack-indicators {
      text-align: center;
      margin-top: 10px;
    }

    .snack-indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 5px;
      background-color: #ccc;
      border-radius: 50%;
      cursor: pointer;
    }

    .snack-indicator.active {
      background-color: #007bff;
    }

    /* 小吃视频样式 */
    .snack-video-container {
      max-width: 600px;
      margin: 30px auto; /* 增加视频和图片之间的间距 */
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

    .snack-video-container video {
      width: 100%;
      height: auto;
      display: block;
    }

    /* 意见反馈表单样式 */
    .feedback-container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-top: 40px;
    }

    .feedback-container h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .feedback-container form {
      display: flex;
      flex-direction: column;
    }

    .feedback-container label {
      margin-bottom: 8px;
      font-weight: bold;
    }

    .feedback-container input,
    .feedback-container textarea {
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1em;
    }

    .feedback-container button {
      padding: 12px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 1em;
      cursor: pointer;
    }

    .feedback-container button:hover {
      background-color: #0056b3;
    }

    .success-message {
      display: none;
      margin-top: 20px;
      padding: 15px;
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
      border-radius: 4px;
      text-align: center;
    }

    /* 旅游助手样式 */
    .travel-assistant {
      font-family: Arial, sans-serif;
      background-color: #f5f7fa;
      padding: 40px;
      max-width: 800px;
      margin: auto;
      margin-top: 40px;
    }

    .travel-assistant h1 {
      text-align: center;
      color: #333;
    }

    .travel-assistant form {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 20px;
    }

    .travel-assistant input[type="text"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .travel-assistant button {
      padding: 12px;
      background-color: #007bff;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .travel-assistant button:hover {
      background-color: #0056b3;
    }

    .travel-assistant .result {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      white-space: pre-wrap;
      color: #333;
    }

    .login-required {
      text-align: center;
      padding: 20px;
      background-color: #fff3cd;
      color: #856404;
      border-radius: 5px;
      margin-bottom: 20px;
    }

    /* 登录注册弹窗样式 */
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 300px;
      text-align: center;
    }

    .modal-content input {
      margin: 10px 0;
      width: 100%;
      padding: 8px;
    }

    .modal-content button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- 导航栏 -->
  <nav>
    <a href="#" onclick="showSection('home')">首页</a>
    <a href="#" onclick="showSection('scenic-spots')">推荐景点</a>
    <a href="#" onclick="showSection('snacks')">风味小吃</a>
    <a href="#" onclick="showSection('feedback')">景点意见反馈</a>
    <a href="#" onclick="showSection('travel-assistant')">小助手</a>
    <a href="#" onclick="openLoginModal()">登录</a>
    <a href="#" onclick="openRegisterModal()">注册</a>
  </nav>

  <!-- 首页 -->
  <div id="home" class="section">
    <!-- 视频区域 -->
    <div class="video-container">
      <video autoplay muted loop playsinline>
        <source src="Shipin/shipin.mp4" type="video/mp4" />
      </video>
    </div>
    <!-- 居中内容 -->
    <div class="content">
      <h1>欢迎来到多彩贵州</h1>
      <p>这里是贵州热门旅游景点介绍。</p>
    </div>
  </div>

  <!-- 推荐景点 -->
  <div id="scenic-spots" class="section" style="display: none;">
    <div class="carousel-container" id="scenic-carousel">
      <div class="carousel-track" id="scenic-track">
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian1.jpg" alt="景点1"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian2.jpg" alt="景点2"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian3.jpg" alt="景点3"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian4.jpg" alt="景点4"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian5.jpg" alt="景点5"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian6.jpg" alt="景点6"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian7.jpg" alt="景点7"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian8.jpg" alt="景点8"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian9.jpg" alt="景点9"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian10.jpg" alt="景点10"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian11.jpg" alt="景点11"></div>
        <div class="carousel-item"><img src="Zhaopian/jingdian/jingdian12.jpg" alt="景点12"></div>
      </div>
    </div>
  </div>

  <!-- 风味小吃 -->
  <div id="snacks" class="section" style="display: none;">
    <div class="snack-section">
      <!-- 小吃视频 (调整到上方) -->
      <div class="snack-video-container">
        <video controls>
          <source src="Shipin/xiaochi.mp4" type="video/mp4">
        </video>
      </div>
      
      <!-- 小吃图片轮播 (调整到下方) -->
      <div class="snack-carousel-container" id="snack-carousel">
        <div class="snack-carousel-track" id="snack-track">
          <div class="snack-carousel-item"><img src="Zhaopian/zhaopian1.jpg" alt="小吃1"></div>
          <div class="snack-carousel-item"><img src="Zhaopian/zhaopian2.jpg" alt="小吃2"></div>
          <div class="snack-carousel-item"><img src="Zhaopian/zhaopian3.jpg" alt="小吃3"></div>
          <div class="snack-carousel-item"><img src="Zhaopian/zhaopian4.jpg" alt="小吃4"></div>
          <div class="snack-carousel-item"><img src="Zhaopian/zhaopian5.jpg" alt="小吃5"></div>
        </div>
        <!-- 左右按钮 -->
        <button class="snack-carousel-btn prev" onclick="prevSnackSlide()">❮</button>
        <button class="snack-carousel-btn next" onclick="nextSnackSlide()">❯</button>
        <!-- 指示器 -->
        <div class="snack-indicators" id="snack-indicators"></div>
      </div>
    </div>
  </div>

  <!-- 景点意见反馈 -->
  <div id="feedback" class="section" style="display: none;">
    <div class="feedback-container">
      <h2>请留下您的宝贵意见</h2>
      <form id="feedbackForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" placeholder="请输入您的用户名" required />

        <label for="scenicSpot">景点名称：</label>
        <input type="text" id="scenicSpot" placeholder="请输入景点名称" required />

        <label for="content">意见反馈：</label>
        <textarea id="content" rows="5" placeholder="请输入您的意见或建议" required></textarea>

        <button type="submit">提交反馈</button>
      </form>
      <!-- 成功提示 -->
      <div id="successMessage" class="success-message">
        感谢您的反馈！我们会认真处理每一条意见，欢迎下次旅游您还会选择贵州！！！。
      </div>
    </div>
  </div>

  <!-- 旅游助手 -->
  <div id="travel-assistant" class="section" style="display: none;">
    <div class="travel-assistant">
      <h1>🌍 AI旅游助手</h1>
      
      <div id="loginRequired" class="login-required">
        <p>请先<a href="#" onclick="openLoginModal()">登录</a>或<a href="#" onclick="openRegisterModal()">注册</a>以使用AI旅游助手</p>
      </div>
      
      <form id="travelForm" style="display: none;">
        <label for="destination">请输入你想去的地方：</label>
        <input type="text" id="destination" placeholder="例如：北京、上海、成都..." required />
        <button type="submit">生成旅游攻略</button>
      </form>
      
      <div class="result" id="resultArea" style="display: none;"></div>
    </div>
  </div>

  <!-- 登录模态框 -->
  <div id="loginModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeLoginModal()">&times;</span>
      <form id="loginForm">
        <h2>登录</h2>
        <input type="text" id="loginUsername" placeholder="用户名" required />
        <input type="password" id="loginPassword" placeholder="密码" required />
        <button type="submit">登录</button>
        <p class="error" id="loginErrorMsg"></p>
        <p><a href="#" onclick="closeLoginModal(); openRegisterModal()">没有账号？去注册</a></p>
      </form>
    </div>
  </div>

  <!-- 注册模态框 -->
  <div id="registerModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeRegisterModal()">&times;</span>
      <form id="registerForm">
        <h2>注册</h2>
        <input type="text" id="registerUsername" placeholder="用户名" required />
        <input type="password" id="registerPassword" placeholder="密码" required />
        <button type="submit">注册</button>
        <p><a href="#" onclick="closeRegisterModal(); openLoginModal()">已有账号？去登录</a></p>
      </form>
    </div>
  </div>

  <script>
    // 显示指定部分
    function showSection(sectionId) {
      const sections = document.querySelectorAll('.section');
      sections.forEach(section => {
        section.style.display = 'none';
      });
      document.getElementById(sectionId).style.display = 'block';
      
      // 检查旅游助手是否需要登录
      if (sectionId === 'travel-assistant') {
        checkLoginStatus();
      }
    }

    // 检查登录状态
    function checkLoginStatus() {
      const isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true';
      const loginRequired = document.getElementById('loginRequired');
      const travelForm = document.getElementById('travelForm');
      
      if (isLoggedIn) {
        loginRequired.style.display = 'none';
        travelForm.style.display = 'flex';
      } else {
        loginRequired.style.display = 'block';
        travelForm.style.display = 'none';
      }
    }

    // 景点轮播图
    const scenicTrack = document.getElementById('scenic-track');
    const scenicSlides = Array.from(scenicTrack.children);
    const totalScenicSlides = scenicSlides.length;
    let scenicCurrentIndex = 0;

    const scenicContainerHeight = document.querySelector('.carousel-container').offsetHeight;
    scenicSlides.forEach(slide => {
      slide.style.height = `${scenicContainerHeight}px`;
    });

    function nextScenicSlide() {
      scenicCurrentIndex = (scenicCurrentIndex + 1) % totalScenicSlides;
      scenicTrack.style.transform = `translateY(-${scenicCurrentIndex * 100}%)`;
    }

    setInterval(nextScenicSlide, 1000);

    // 小吃图片轮播
    const snackTrack = document.getElementById('snack-track');
    const snackSlides = Array.from(snackTrack.children);
    const snackIndicatorsContainer = document.getElementById('snack-indicators');
    const snackPrevBtn = document.querySelector('.snack-carousel-btn.prev');
    const snackNextBtn = document.querySelector('.snack-carousel-btn.next');

    const snackSlideWidth = snackSlides[0].getBoundingClientRect().width;

    let snackCurrentIndex = 0;
    let snackIntervalId;

    // 初始化指示器
    function initSnackIndicators() {
      snackSlides.forEach((_, i) => {
        const dot = document.createElement('span');
        dot.classList.add('snack-indicator');
        if (i === 0) dot.classList.add('active');
        dot.addEventListener('click', () => goToSnackSlide(i));
        snackIndicatorsContainer.appendChild(dot);
      });
    }

    // 更新指示器
    function updateSnackIndicators(index) {
      const dots = document.querySelectorAll('.snack-indicator');
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
    }

    // 设置轮播位置
    function setSnackSlidePosition(slide, index) {
      slide.style.left = `${index * 100}%`;
    }

    snackSlides.forEach(setSnackSlidePosition);

    // 移动轮播
    function moveToSnackSlide(index) {
      snackTrack.style.transform = `translateX(-${index * 100}%)`;
      snackCurrentIndex = index;
      updateSnackIndicators(index);
    }

    // 上一张
    function prevSnackSlide() {
      const newIndex = (snackCurrentIndex - 1 + snackSlides.length) % snackSlides.length;
      moveToSnackSlide(newIndex);
      resetSnackAutoPlay();
    }

    // 下一张
    function nextSnackSlide() {
      const newIndex = (snackCurrentIndex + 1) % snackSlides.length;
      moveToSnackSlide(newIndex);
      resetSnackAutoPlay();
    }

    // 跳转到指定幻灯片
    function goToSnackSlide(index) {
      moveToSnackSlide(index);
      resetSnackAutoPlay();
    }

    // 自动播放
    function startSnackAutoPlay() {
      snackIntervalId = setInterval(nextSnackSlide, 3000); // 每3秒切换一次
    }

    // 重置自动播放
    function resetSnackAutoPlay() {
      clearInterval(snackIntervalId);
      startSnackAutoPlay();
    }

    // 初始化
    initSnackIndicators();
    startSnackAutoPlay();

    // 意见反馈表单提交
    document.getElementById('feedbackForm').addEventListener('submit', function (e) {
      e.preventDefault();

      const username = document.getElementById('username').value.trim();
      const scenicSpot = document.getElementById('scenicSpot').value.trim();
      const content = document.getElementById('content').value.trim();

      if (!username || !scenicSpot || !content) {
        alert('请填写所有字段');
        return;
      }

      // 模拟提交成功
      document.getElementById('successMessage').style.display = 'block';

      // 可选：清空表单
      document.getElementById('feedbackForm').reset();
    });

    // 旅游助手 - 生成任意城市的旅游攻略
    function generateTravelGuide(destination) {
      // 定义一些热门景点类型
      const scenicSpotTypes = [
        "自然风光", "历史古迹", "文化体验", "主题公园", "美食街", "购物中心", 
        "博物馆", "艺术展览", "民俗村落", "温泉度假"
      ];
      
      // 定义一些美食类型
      const foodTypes = [
        "特色小吃", "传统名菜", "地方糕点", "海鲜盛宴", "火锅", "烧烤", 
        "清真美食", "素食餐厅", "创意料理", "夜市小吃"
      ];
      
      // 随机选择景点类型和数量
      const randomScenicSpots = [];
      const scenicCount = Math.floor(Math.random() * 3) + 3; // 3-5个景点
      for (let i = 0; i < scenicCount; i++) {
        const type = scenicSpotTypes[Math.floor(Math.random() * scenicSpotTypes.length)];
        randomScenicSpots.push(`${type}：${destination}${Math.floor(Math.random() * 100)}号 ${type}馆`);
      }
      
      // 随机选择美食类型和数量
      const randomFoods = [];
      const foodCount = Math.floor(Math.random() * 3) + 3; // 3-5种美食
      for (let i = 0; i < foodCount; i++) {
        const type = foodTypes[Math.floor(Math.random() * foodTypes.length)];
        randomFoods.push(`${type}：${destination}${Math.floor(Math.random() * 100)}号 ${type}店`);
      }
      
      // 生成旅游攻略
      return `${destination}旅游攻略：

景点推荐：
${randomScenicSpots.join('\n')}

美食推荐：
${randomFoods.join('\n')}

最佳旅游时间：四季皆宜

注意事项：
1. 提前了解当地天气，准备合适的衣物。
2. 尊重当地风俗习惯和宗教信仰。
3. 保管好个人财物，注意出行安全。
4. 品尝当地美食时，建议选择正规餐厅。
5. 可提前下载当地地图或交通APP，方便出行。`;
    }

    document.getElementById('travelForm').addEventListener('submit', function (e) {
      e.preventDefault();
      const destination = document.getElementById('destination').value.trim();
      const resultArea = document.getElementById('resultArea');

      if (!destination) {
        alert('请输入旅游地点');
        return;
      }

      // 模拟 AI 生成结果
      const guide = generateTravelGuide(destination);

      resultArea.style.display = 'block';
      resultArea.textContent = guide;
    });

    // 登录模态框
    function openLoginModal() {
      document.getElementById('loginModal').style.display = 'block';
    }

    function closeLoginModal() {
      document.getElementById('loginModal').style.display = 'none';
    }

    document.getElementById('loginForm').addEventListener('submit', function (e) {
      e.preventDefault();
      const username = document.getElementById('loginUsername').value;
      const password = document.getElementById('loginPassword').value;
      const storedPassword = localStorage.getItem(username);

      if (!storedPassword || storedPassword !== password) {
        document.getElementById('loginErrorMsg').textContent = '登录失败，请重新输入';
        return;
      }

      sessionStorage.setItem('isLoggedIn', 'true');
      sessionStorage.setItem('username', username);
      closeLoginModal();
      alert('登录成功！');
      checkLoginStatus(); // 更新旅游助手显示状态
    });

    // 注册模态框
    function openRegisterModal() {
      document.getElementById('registerModal').style.display = 'block';
    }

    function closeRegisterModal() {
      document.getElementById('registerModal').style.display = 'none';
    }

    document.getElementById('registerForm').addEventListener('submit', function (e) {
      e.preventDefault();
      const username = document.getElementById('registerUsername').value;
      const password = document.getElementById('registerPassword').value;

      if (localStorage.getItem(username)) {
        alert('该用户名已被注册');
        return;
      }

      localStorage.setItem(username, password);
      closeRegisterModal();
      alert('注册成功，请登录');
      openLoginModal();
    });
  </script>
</body>

</html>